<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleTree</title>
<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/SimpleTree.js"></script>
<script type="text/javascript" src="js/ejs_production.js"></script>

<script type="text/javascript">
var renderobj=eval('({"key":"","themm":""})');
function pstree(){
    var skey=document.getElementById("searchKey").value;
    themm.key=skey;
    renderobj.key=skey;
    renderobj.themm=themm;
    var html = new EJS({url: 'treechildview.ejs'}).render(renderobj);
    document.getElementById("qst_tree").innerHTML=html;
    $(function(){
    	$(".st_tree").SimpleTree({
    		click:function(a){
    			if(!$(a).attr("hasChild")&&$(a).attr("href")!=""){
    			    parent.content.location.href=$(a).attr("href");
    				}
    		}
    	});
    });
}
var themm=null;
$(function(){
    $.ajax({
                type: "get",//使用get方法访问后台
                dataType: "json",//返回json格式的数据
                url: "http://115.29.8.106:8001/getJson",//要访问的后台地址
                data: "pageIndex=" + null,//要发送的数据
                success: function(msg){//msg为返回的数据，在这里做数据绑定
                themm=msg;
                pstree();
    }});
});
</script>
</head>
<body>
<div>
<input type="text" id="searchKey" value='' onkeyup="pstree()"/>
</div>
<div class="st_tree" id="qst_tree">
<!--
<ul>
	<li><a href="#" ref="hyjm">欢迎页</a></li>
	<li><a href="#" ref="xtgl">系统工具</a></li>
    <ul show="true">
		<li><a href="#" ref="yhgl">Nginx</a></li>
		<li><a href="#" ref="rzck">Zookeper</a></li>
	<li><a href="#" ref="ckgl">SVN</a></li>
    <ul>
		<li><a href="#" ref="kcgl">nodezk</a></li>
        <ul>
            <li><a href="#" ref="yhgl">trunk</a></li>
            <li><a href="#" ref="rzck">tags</a></li>
            <li><a href="#" ref="rzck">brunch</a></li>
        </ul>
	</ul>
	</ul>
</ul>-->
</div>
 <div id="messages"></div>
</body>
</html>
  <script type="text/javascript">
    var webSocket =
      new WebSocket('ws://115.29.8.106:8000');

    webSocket.onerror = function(event) {
      onError(event)
    };

    webSocket.onopen = function(event) {
      onOpen(event)
    };

    webSocket.onmessage = function(event) {
      onMessage(event)
    };

    function onMessage(event) {
       themm=eval('('+event.data+')');
       pstree();
    }

    function onOpen(event) {
      document.getElementById('messages').innerHTML
        = 'Connection Ok!';
    }

    function onError(event) {
      //alert(event.data);
    }

    function start() {
      webSocket.send('hello');
      return false;
    }
  </script>